<template>
    <div class="file-preview">
        <div class="mask"></div>
        <span class="btn close" @click="close()">
            <i class="el-icon-close"></i>
        </span>
        <div class="file-viewer">
            <img :src="imgUrl" v-if="isImage" />
            <vue-office-docx v-else-if="getFileType == 'docx'" :src="imgUrl"></vue-office-docx>
            <vue-office-excel v-else-if="getFileType == 'xlsx'" :src="imgUrl"></vue-office-excel>
            <vue-office-pdf v-else-if="getFileType == 'pdf'" :src="imgUrl"></vue-office-pdf>
        </div>
        <span class="btn prev" @click="pageTurning('prev')">
            <i class="el-icon-arrow-left"></i>
        </span>
        <span class="btn next" @click="pageTurning('next')">
            <i class="el-icon-arrow-right"></i>
        </span>
    </div>
</template>

<script>
// //docx文档预览组件
// npm install @vue-office/docx
//
// //excel文档预览组件
// npm install @vue-office/excel
//
// //pdf文档预览组件
// npm install @vue-office/pdf

// npm install @vue/composition-api vue 2.6及以下版本需添加此依赖   //     "@vue/composition-api": "^1.7.2",

//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
//引入相关样式
import '@vue-office/docx/lib/index.css';
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel';
//引入相关样式
import '@vue-office/excel/lib/index.css';
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf';
export default {
    name: 'FilePreview',
    components: {
        VueOfficeDocx,
        VueOfficeExcel,
        VueOfficePdf
    },
    props: {
        previewSrcList: {
            type: [Array],
            default: []
        },
        current: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            index: this.current,
          isComponentLoaded: false, // 是否加载组件
        };
    },
    computed: {
        imgUrl() {
            console.log('文件地址', this.previewSrcList[this.index]);
            return this.previewSrcList[this.index];
        },
        getFileType() {
            console.log('文件类型', this.imgUrl.split('.').pop());
            return this.imgUrl.split('.').pop();
        },
        isImage() {
            console.log('是否图片', this.imgUrl.indexOf('.jpg') > -1 || this.imgUrl.indexOf('.png') > -1 || this.imgUrl.indexOf('.jpeg') > -1);
            return this.imgUrl.indexOf('.jpg') > -1 || this.imgUrl.indexOf('.png') > -1 || this.imgUrl.indexOf('.jpeg') > -1;
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
        pageTurning(type) {
            if (type == 'prev') {
                if (this.index == 0) {
                    this.index = this.previewSrcList.length - 1;
                } else {
                    this.index--;
                }
            }
            if (type == 'next') {
                if (this.index == this.previewSrcList.length - 1) {
                    this.index = 0;
                } else {
                    this.index++;
                }
            }
        }
    }
};
</script>

<style scoped lang="scss">
.file-preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2026;
    .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.5;
        background: #000;
    }
    .btn {
        position: absolute;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        opacity: 0.8;
    }
    .close {
        top: 40px;
        right: 40px;
        width: 40px;
        height: 40px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
    }
    .file-viewer {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: auto;
            height: auto;
            max-height: 100%;
            max-width: 100%;
        }
        .vue-office-pdf,.vue-office-excel,.vue-office-docx {
            width: 85%;
            height: 100%;
        }
    }
    .prev {
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        border-color: #fff;
    }
    .next {
        top: 50%;
        right: 40px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        border-color: #fff;
    }
}
</style>
